<template>
  <!-- 我的视频 -->
  <div class="wdsp">
    <!-- 筛选栏 -->
    <div class="query">
      <my-form :list="tableQuery" @changeFormData="changeConditions"></my-form>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#387CF7" @click="search">搜索</my-button>
      <my-button bgc="#fff" border="#DCDCDF" fontColor="#88898E" @click="reset">重置</my-button>
    </div>
    <!-- 主体 -->
    <div class="container">
      <!-- 操作栏 -->
      <div class="action">
        <div class="add-del">
          <my-button type="add" bgc="#E4ECFF" fontColor="#649AF9" @click="handleClickAdd">添加</my-button>

          <my-button type="add" bgc="#E4ECFF" fontColor="#649AF9" @click="Automaticrelease">自动发布</my-button>

        </div>

        <div class="list-refresh">
          <my-dropdown-list :list="tableColumn" @change="changeTableColumn"></my-dropdown-list>
          <div class="iconfont icon" @click="refreshdata">&#xe74a;</div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table border v-if="tableHeight" :data="dataSource" :height="tableHeight" row-class-name="row-class-name"
          header-row-class-name="header-row-class-name" style="width: 100%">
          <el-table-column v-if="tableColumn.account_new.show" prop="account_new" label="账号" min-width="150">
          </el-table-column>
          <el-table-column v-if="tableColumn.title_new.show" prop="title_new" label="标题" min-width="150">
            <template slot-scope="scope">
              <el-tooltip effect="light" :content="scope.row.tags" placement="top-start">
                <div style="cursor: default">{{ scope.row.title_new }}</div>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.thumb_new.show" prop="thumb_new" label="视频" width="80">
            <template slot-scope="scope">
              <el-tooltip effect="light" :content="isImg(scope.row.thumb_new) ? '点击打开视频' : scope.row.video_new_tips"
                placement="top-start">
                <div v-if="!isImg(scope.row.thumb_new)" class="tag" @click="handleClickThumb(scope.row)">
                  {{ scope.row.thumb_new }}
                </div>
                <img v-if="isImg(scope.row.thumb_new)" :src="scope.row.thumb_new" alt="" class="thumb_new-img"
                  @click="handleClickThumb(scope.row)" />
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.videodata_new.show" prop="videodata_new" label="数据统计" min-width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.videodata_new" class="slot-row">
                <div class="icon-block">
                  <div class="iconfont icon">&#xe657;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.comment_count }}
                  </div>
                  <div class="line"></div>
                </div>
                <div class="icon-block">
                  <div class="iconfont icon">&#xe647;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.digg_count }}
                  </div>
                  <div class="line"></div>
                </div>
                <div class="icon-block">
                  <div class="iconfont icon">&#xe63d;</div>
                  <div class="number">
                    {{ scope.row.videodata_new.play_count }}
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.status_new.show" prop="status_new" label="状态" width="100">
            <template slot-scope="scope">
              <my-button v-if="scope.row.status_new == '已发布'" bgc="#E4ECFF" border="#C7D9F8" fontColor="#649AF9">
                {{ scope.row.status_new }}
              </my-button>

              <el-tooltip v-if="scope.row.status_new == '未通过'" effect="light" :content="scope.row.auditnote" placement="top-start">
                <my-button bgc="#FFEEEE" border="#FADBDB" fontColor="#F78385"
                  @click="showEditDialog(scope.row)">{{ scope.row.status_new }}</my-button>
              </el-tooltip>

              <my-button v-if="scope.row.status_new == '待审核'" bgc="#EBF9E2" border="#DAF0CA" fontColor="#93DB6C"
                @click="Didnotpass(scope.row)">{{ scope.row.status_new }}</my-button>

              <my-button v-if="scope.row.status_new == '待发送'" bgc="#fff" border="#DCDCDF" fontColor="#387CF7">
                {{ scope.row.status_new }}
              </my-button>
              <my-button v-if="scope.row.status_new == '不宜公开'" bgc="#fff" border="#DCDCDF" fontColor="#88898E">
                {{ scope.row.status_new }}
              </my-button>
              <my-button v-if="scope.row.status_new == '平台审核'" bgc="#fff" border="#DCDCDF" fontColor="#2EE8DD">
                {{ scope.row.status_new }}
              </my-button>
              <my-button v-if="scope.row.status_new == '已删除'" bgc="#fff" border="#DCDCDF" fontColor="#F2686A">
                {{ scope.row.status_new }}
              </my-button>
            </template>
          </el-table-column>
          <el-table-column v-if="tableColumn.sendtime.show" prop="sendtime" label="发布时间" width="140"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <div class="slot-row">
                <div v-if="isShowDel(scope.row)" class="iconfont table-del-icon" @click="deleteRow(scope.row)">
                  &#xe650;
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="wdsp-page">
        <el-pagination background :current-page="currentPage" :page-size="pageSize" :page-sizes="[15, 25, 30]"
          layout="total,sizes, prev, pager, next, jumper" :total="total" @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </div>
    <!-- 确认弹窗 -->
    <my-dialog-confirm :show.sync="showConfirm" @confirm="confirmDelete"></my-dialog-confirm>
  </div>
</template>

<script>
  import myButton from "@/components/myButton.vue";
  import myForm from "@/components/myForm.vue";
  import myDropdownList from "@/components/myDropdownList.vue";
  import myDialogConfirm from "@/components/myDialogConfirm.vue";

  export default {
    components: {
      myButton,
      myForm,
      myDropdownList,
      myDialogConfirm,
    },
    data() {
      return {
        showConfirm: false,
        tableQuery: {
          title: {
            type: "input",
            label: "标题",
            value: "",
            placeholder: "请输入标题",
          },
          type: {
            type: "select",
            label: "平台",
            value: "",
            list: [{
                label: "全部",
                value: "",
              },
              {
                label: "抖音",
                value: "douyin",
              },
              {
                label: "快手",
                value: "kuaishou",
              },
              {
                label: "好看",
                value: "haokan",
              },
              {
                label: "B站",
                value: "bilibili",
              },
              {
                label: "西瓜",
                value: "xigua",
              },
              {
                label: "头条",
                value: "toutiao",
              },
            ],
          },
          status: {
            type: "select",
            label: "状态",
            value: "",
            placeholder: "",
            list: [{
                label: "全部",
                value: "",
              },
              {
                label: "未通过",
                value: "0",
              },
              {
                label: "已发布",
                value: "1",
              },
              {
                label: "不宜公开",
                value: "2",
              },
              {
                label: "平台审核",
                value: "4",
              },
            ],
          },
        }, // 表格列表搜索条件
        dataSource: [],
        tableHeight: 0,
        currentPage: 1,
        pageSize: 15,
        total: 300,
        selectedRows: [],
        tableColumn: {
          account_new: {
            show: true,
            text: "账号",
          },
          title_new: {
            show: true,
            text: "标题",
          },

          thumb_new: {
            show: true,
            text: "视频",
          },
          videodata_new: {
            show: true,
            text: "数据统计",
          },
          status_new: {
            show: true,
            text: "状态",
          },
          sendtime: {
            show: true,
            text: "发布时间",
          },
        },
        timer: null,
      };
    },
    mounted() {
      this.tableHeight = document.querySelector(".table").offsetHeight - 2;

      window.onresize = () => {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => {
          this.tableHeight = document.querySelector(".table").offsetHeight - 2;
        }, 500);
      };
      this.getData();
    },
    beforeDestroy() {
      window.onresize = null;
    },
    methods: {
      // --------------------- wdsp ----------------------
      async getData() {
        let filter = {};
        for (let key in this.tableQuery) {
          if (this.tableQuery[key].value == "") {
            continue;
          }
          filter[key] = this.tableQuery[key].value;
        }
        let res = await this.$api.wdsp_getData({
          page: this.currentPage,
          limit: this.pageSize,
          filter,
          op: {
            title: "%*%",
            type: "=",
            status: "="
          },
        });
        console.log(res, "resres");
        this.dataSource = res.data;
        this.total = res.count;
      },

      changeConditions(res) {
        this.tableQuery[res.key].value = res.val;
      },
      // 搜索
      search() {
        this.currentPage = 1;
        this.dataSource = [];
        this.getData();
      },
      //未通过
      Didnotpass(data) {
        this.$alert('视频已发送或正在审核,禁止修改', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            // this.$message({
            //   type: 'info',
            //   message: '视频已发送或正在审核,禁止修改'
            // });
          }
        });
      },
      handleClickAdd() {
        window.sessionStorage.removeItem("tmpl");
        this.$router.push({
          name: "wdspAdd"
        });
      },
      /* 自动发布*/
      Automaticrelease() {
        //跳转自动发布
        window.sessionStorage.removeItem("tmpl");
        this.$router.push({
          name: "automaticrelease"
        });
      },
      // 单个删除
      deleteRow(row) {
        this.showConfirm = true;
        this.selectedRows = [row];
      },
      // 确认删除
      async confirmDelete() {
        await this.$api.wdsp_delete({
          id: this.selectedRows.map((v) => v.id),
        });
        this.showConfirm = false;
        // 重新计算页码
        //  删除以后 剩余数量
        let num = this.total - this.selectedRows.length;
        // 获得删除以后剩余数量 可以 分几页
        let page = Math.ceil(num / this.pageSize);
        // 如果 当前页 > page
        if (this.currentPage > page) {
          this.currentPage = page;
        }
        this.getData();
      },
      // 页码跳转
      handleCurrentChange(page) {
        this.currentPage = page;
        this.getData();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getData();
      },
      // 显示 隐藏表格某一列
      changeTableColumn(key) {
        this.tableColumn[key].show = !this.tableColumn[key].show;
      },
      // 重置
      reset() {
        for (let key in this.tableQuery) {
          this.tableQuery[key].value = "";
          this.getData();
        }
      },
      // 刷新数据
      refreshdata() {
        this.currentPage = 1;
        this.dataSource = [];
        this.getData();
      },
      // 播放表格中的某一行
      handleClickThumb(row) {
        if (row.video_new) {
          window.open(row.video_new);
        }
      },
      isImg(str) {
        const arr = ["jpg", "jpeg", "png", "JPG", "PNG"];
        return arr.some((v) => str.includes(v));
      },
      isShowDel(row) {
        if (row.accuser == "system") {
          if (row.status_new == "未通过") {
            return true;
          }
        }
        if (row.accuser != "system") {
          return true;
        }
      },
      // 显示编辑弹窗
      async showEditDialog(row) {
        this.$router.push({
          path: "/wdsp/edit",
          query: {
            id: row.id
          }
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .wdsp {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 112px 0 0px 0;
    box-sizing: border-box;
  }

  .query {
    position: absolute;
    top: 52px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #fff;

    .button {
      width: 60px;
      height: 30px;
      border-radius: 3px;
      margin-left: 15px;
    }
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 65px 0 80px 0;
    box-sizing: border-box;
    background-color: #fff;

    .action {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 9;
      width: 100%;
      height: 65px;

      .add-del {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        padding: 0 34px;
        box-sizing: border-box;

        /deep/ .button {
          width: 107px;
          height: 40px;
          border-radius: 3px;
          margin-right: 15px;
          font-size: 13px;
          font-weight: bold;
        }
      }

      .list-refresh {
        position: absolute;
        right: 25px;
        bottom: 12px;
        display: flex;
        align-items: center;
        margin-left: 92.4%;
        width: 90px;

        .icon {
          font-size: 17px;
          color: rgba(212, 212, 212);
          cursor: pointer;
          margin-left: 20px;
        }
      }
    }

    .table {
      width: 100%;
      height: 100%;
      padding: 0 34px;
      box-sizing: border-box;

      /deep/ .header-row-class-name {
        height: 65px;

        th {
          background-color: #f0f4ff;
        }

        .cell {
          text-align: center;
          color: #333;
        }
      }

      /deep/ .row-class-name {
        height: 90px;

        .cell {
          display: flex;
          justify-content: center;
          text-align: center;

          img {
            object-fit: contain;
          }

          .slot-row {
            display: flex;
            align-items: center;
            justify-content: center;

            .icon-block {
              display: flex;
              align-items: center;

              .icon {
                color: #333;
                font-size: 20px;
                font-weight: bold;
              }

              .number {
                color: #333;
                font-size: 14px;
                font-weight: bold;
                margin-left: 5px;
              }

              .line {
                width: 2px;
                height: 12px;
                margin: 0 8px;
                background-color: #c7c7c7;
              }
            }

            :last-child {
              border-right: 0;
            }
          }

          .button {
            width: 60px;
            height: 24px;
          }

          .tag {
            cursor: pointer;

            &:hover {
              color: #ee1e4f;
            }
          }
        }
      }
    }
  }

  .wdsp-page {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 80px;

    /deep/ .active {
      background-color: #387cf7 !important;
    }
  }

  .thumb_new-img {
    width: 60px;
    height: 80px;
    cursor: pointer;
  }
</style>
